import React, { useEffect, useState } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { ScrollView, View, Text, TouchableOpacity } from 'react-native'
import { commonStyle, translateSize } from 'styles'
import { ShortBar, InfoLayout, InputMoney, ChangeCard, SettingMoney } from 'components'
import { recognitionConfirmStyle, tradListStyle } from './styles'
import pos, { PosAppMdmFqOutput, PosAppCustomer, PosAppBank, PosAppTrade, PosAppBankIuput } from 'api/pos'
import { getAuthorization } from 'services/authorization'
import ChooseRoom, { RoomInfo } from './components/choose-room/ChooseRoom'
import PayButton from './components/PayButton';

/**
 * 手续费
 * @param props
 */
const HandingFeeScreen: NavigationStackScreenComponent<{
	tradeInfo: PosAppTrade
	bankList: PosAppBank[]
}> = props => {

	const [bank, setBank] = useState<PosAppBank>({})
	const [bankList, setBankList] = useState<PosAppBank[]>([])
	const [money, setMoney] = useState(0.00)

	useEffect(() => {
		// let bankList = props.navigation.getParam('bankList')
		// bankList.length > 0 && setBank(bankList[0])
		loadBank()
	}, [props.navigation.getParam('tradeInfo').erpId, getAuthorization().project.id])

	//手续费根据交易获取入账银行
	const loadBank = () => {
		let posAppBankIuput = {} as PosAppBankIuput
		posAppBankIuput.erpTradeId = props.navigation.getParam('tradeInfo').erpId
		posAppBankIuput.projectId = getAuthorization().project.id
		posAppBankIuput.mac=getAuthorization().mac
		posAppBankIuput.scene = 'ssxf'
		pos.posApp.getBankByScene(posAppBankIuput).then(res => {
			setBankList(res || [])
			if (res && res.length === 1) {
				setBank(res[0])
			}
		})
	}

	return (
		<View style={{ height: '100%', width: '100%', position: 'relative' }}>
			<ScrollView>
				<View style={[commonStyle.containerColumn, recognitionConfirmStyle.container]}>
					<View style={{ ...tradListStyle.titleContainer, paddingBottom: translateSize(28) }}>
						<View style={tradListStyle.projectContainer}>
							<ShortBar style={tradListStyle.title} title={getAuthorization().project.name} />
							<Text style={commonStyle.titleTag}>{props.navigation.getParam('tradeInfo').auartName} </Text>
						</View>
						<Text style={{ ...tradListStyle.room, ...commonStyle.roomStyle }}> {props.navigation.getParam('tradeInfo').roomName || ''} </Text>
					</View>
					<View style={{ ...recognitionConfirmStyle.projectList, marginTop: translateSize(0) }}>

						<InfoLayout title="款项" content="手续费" />
						<SettingMoney />
						<InputMoney editable={true} upperLimit={99999999} defaultValue={money} onChange={money => { setMoney(Number(money)) }} />
					</View>
					<ChangeCard bank={bank} bankList={bankList} onPress={(bank: PosAppBank) => { setBank(bank) }} />
					<PayButton onPress={(type: 'scan' | 'card') => {
						// pay(type)
					}} bank={bank} customer={props.navigation.getParam('tradeInfo').customer} feeList={[]} money={money} scene="ssxf" refId={props.navigation.getParam('tradeInfo').erpId} />
				</View>
			</ScrollView>
		</View>
	)
}

HandingFeeScreen.navigationOptions = props => {
	return {
		title: '收手续费'
	}
}

export default HandingFeeScreen
